<template>
    <div class="event">
        <Title :msg="msg" />
        <ContextBox v-for="(item, index) in list" :key="index" :title="item['title']" :destList="item['destList']"
            :codeList="item['codeList']">
        </ContextBox>
        <div class="link-open-window" @click="toInvokeHandler">基本示例</div>

        <ContextBox v-for="(item, index) in list2" :key="index" :title="item['title']" :destList="item['destList']"
            :codeList="item['codeList']">
        </ContextBox>
        <div class="link-open-window" @click="clickHandler">点击触发监听 </div>
        <div class="link-open-window">{{ eventMsg }}{{ count === 0 ? '' : count + '次' }}</div>
        <el-button type="primary" @click="prevHandler" class="prev-btn">返回</el-button>
        <el-button type="primary" @click="nextHandler" class="next-btn">下一页</el-button>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import Title from '@/components/Title.vue'
import ContextBox from '@/components/ContextBox.vue'
import { invoke } from '@tauri-apps/api';
import { listen } from '@tauri-apps/api/event';
import { WebviewWindow } from '@tauri-apps/api/window';
// const openUrl = `https://tauri.app/zh-cn/v1/guides/features/command`;
const router = useRouter()
const msg = ref<string>('事件通信')
const eventMsg = ref<string>('')
const count = ref<number>(0)
const list = ref<Array<{
    title: string,
    destList: Array<string>,
    codeList: Array<string>
}>>([{
    title: '从前端调用Rust',
    destList: [
        ' Tauri提供了一个简单而强大的 command 系统,命令可以接受参数并返回值。 它们也可以返回错误并且是异步的（async）。',
    ],
    codeList: []
}])

const list2 = ref<Array<{
    title: string,
    destList: Array<string>,
    codeList: Array<string>
}>>([{
    title: '前端监听Tauri事件',
    destList: [
        'Tauri事件系统是一个多生产者多消费者通信原语，允许在前端和后端之间传递消息。',
        `import { listen } from '@tauri-apps/api/event'`,
        `   listen<string>('click-me', (data) => {
               console.log(data);
               eventMsg.value = data?.payload ?? ''
         })`,
    ],
    codeList: []
}])

onMounted(() => {
    listen<string>('click-me', (data) => {
        console.log(data);
        count.value++
        eventMsg.value = data?.payload ?? ''
    })
})


const clickHandler = async () => {
    await invoke('click');
}

const toInvokeHandler = () => {
    const window = new WebviewWindow('inovke-page', {
        url: "http://localhost:1420/#/invoke",
        width: 1200,
        height: 800
    })
    window.once('tauri://created', () => {
        console.log('created');
    })
    window.once('tauri://error', (e) => {
        console.log('error', e);
    })
}
const nextHandler = () => {
    router.push({ path: '/http' })
}
const prevHandler = () => {
    router.go(-1)
}

</script>
<style lang='less' scoped>
.event {
    width: 100%;
    height: 100vh;
    background: #fff;
    overflow: hidden;

    .next-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .prev-btn {
        position: fixed;
        top: 20px;
        left: 20px;
    }

    .link-open-window {
        margin-left: 5%;
        font-size: 20px;
        font-weight: 600;
        color: #15bb09;
        cursor: pointer;
        text-decoration: underline;
    }

    .exp {

        font-size: 24px;
        margin: 20px auto;
        width: 90%;
    }

    .btm {
        margin: 0px auto;
        width: 90%;
        display: flex;
        justify-content: space-between;

        .bb {
            .titles {
                font-size: 18px;
                font-weight: 500;
            }

            .img-list {
                display: flex;

                .img {
                    width: 300px;
                }
            }
        }

    }

}
</style>